<!-- 参赛证 -->
<template>
  <el-tabs v-model="activeName" tab-position="left">
    <template v-for="(item, index) in registerTag">
      <el-tab-pane :key="index" :label="item.value" :name="item.code">
        <template v-if="activeName == item.code">
          <Athletes v-if="activeName == 'Athlete'" :active-item="item" />
          <Other v-else :active-item="item" />
        </template>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script>
import Athletes from './competition/athletes';
import Other from './competition/other';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'Competition',
  components: {
    Athletes,
    Other
  },
  data() {
    return {
      activeName: '',
      registerTag: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict().then(res => {
      this.registerTag = res.registerTagType.filter((item) => {
        return item.code !== 'Other' && item.code !== 'HeadQuarters';
      });
      this.activeName = this.registerTag[0].code;
    });
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' })
  }
};
</script>

<style lang="scss" scoped>
</style>
